import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
import { NavLink } from 'react-router-dom'
import './innerStyle.less'
import AllTable from './room/AllTable'

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo,
    currentGroup: state.group.currentGroup,
    currentGroupRules: state.group.currentGroupRules,
    currentSelectedGroupRule: state.group.currentSelectedGroupRule,
    loadComplete: state.group.loadComplete
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    queryCurrentGroupRules: () => dispatch(global.allActions.groupActions.queryCurrentGroupRules)
  }
}

const NoGame = (props) => {
  return <div className="vh-center column full">
    <img className="no-game" src="img/groupNew/no-game.png?v=20181201" alt=""/>
    {
      props.isMyGroup ? <NavLink to="/Rulelist"><img className="mtr-15 no-game-manage" src="img/groupNew/rule-manage.png?v=20181201" alt=""/></NavLink> : null
    }
  </div>
}

class Inner extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
    }
  }
  
  public componentDidMount() {
    this.props.queryCurrentGroupRules()
  }

  public render() {
    const {currentGroup, currentGroupRules, loadComplete} = this.props
    const isMyGroup = currentGroup && currentGroup.owner === 1
    // const {groupName, tip, currentState} = this.state
    return <div className="view-page group-view">
      <div className="pure-g inner-header">
        <div onClick={() => {window.location.hash = 'MemberList'}} className="pure-u-1-3 vh-center inner-tab">
          <span>成员</span>
        </div>
        <div onClick={() => {window.location.hash = 'GroupRuleResult'}} className="pure-u-1-3 vh-center inner-tab">
          <span>战绩</span>
        </div>
        <div className="pure-u-1-3 vh-center inner-tab active">
          <span>房间</span>
        </div>
      </div>
      <div className="inner-body">
        {
          loadComplete ? currentGroupRules.length === 0 ? <NoGame isMyGroup={isMyGroup}></NoGame> : <AllTable></AllTable> : 
          <div className="apply-tip">查询中...</div>
        }
      </div>
      {
        isMyGroup ? <div className="inner-bottom-proxy prue-g v-center">
          {/* <img onClick={() => window.location.hash = 'GroupPlay'} className="inner-bottom-proxy-back" src="img/app/back.png?v=20181201" alt="" /> */}
          <div className="pure-u-12-24 inner-bottom-proxy-btn">
            <img className="inner-bottom-proxy-btn-manage" onClick={() => {window.location.hash = 'RuleList'}} src="img/groupNew/rule-manage-btn.png?v=20181201" alt=""/>            
          </div>
          <div className="pure-u-6-24 inner-bottom-proxy-btn">
            <img onClick={() => {window.location.hash = 'ApplyList'}} src="img/groupNew/apply-new.png?v=20181201" alt=""/>        
          </div>
          <div className="pure-u-6-24 inner-bottom-proxy-btn">
            <img onClick={() => {window.location.hash = 'MainInfo'}} src="img/groupNew/setting-new.png?v=20181201" alt=""/>   
          </div>
        </div> :
        <div className="inner-bottom">
          <div className="text vh-center"><span>我加入的俱乐部</span></div>
          <img onClick={() => {window.location.hash = 'MainInfo'}} className="group-info-abs" src="img/groupNew/group-info.png?v=20181201" alt=""/>
          <NavLink to="/GroupPlay"><img className="back" src="img/app/back.png?v=20181201" alt="" /></NavLink>
        </div>
      }
    </div>
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(Inner)